<template>
  <ul class="weishengxiang">
    <li @click="active = '公共场所'" :class="active=='公共场所'?'active':''">
      <div class="shu">{{topBar.gonggong}}</div>
      <div class="xiang">公共场所</div>
    </li>
    <li @click="active = '饮水卫生'" :class="active=='饮水卫生'?'active':''">
      <div class="shu">{{topBar.yinshui}}</div>
      <div class="xiang">饮水卫生</div>
    </li>
    <li @click="active = '职业卫生'" :class="active=='职业卫生'?'active':''">
      <div class="shu">{{topBar.zhiye}}</div>
      <div class="xiang">职业卫生</div>
    </li>
    <li @click="active = '放射卫生'" :class="active=='放射卫生'?'active':''">
      <div class="shu">{{topBar.fangshe}}</div>
      <div class="xiang">放射卫生</div>
    </li>
    <li @click="active = '学校卫生'" :class="active=='学校卫生'?'active':''">
      <div class="shu">{{topBar.school}}</div>
      <div class="xiang">学校卫生</div>
    </li>
    <li @click="active = '医疗卫生'" :class="active=='医疗卫生'?'active':''">
      <div class="shu">{{topBar.yiliao}}</div>
      <div class="xiang">医疗卫生</div>
    </li>
    <li @click="active = '消毒产品'" :class="active=='消毒产品'?'active':''">
      <div class="shu">{{topBar.xiaodu}}</div>
      <div class="xiang">消毒产品</div>
    </li>
    <li @click="active = '传染病防治'" :class="active=='传染病防治'?'active':''">
      <div class="shu">{{topBar.chanran}}</div>
      <div class="xiang">传染病防治</div>
    </li>
    <li @click="active = '餐饮具'" :class="active=='餐饮具'?'active':''">
      <div class="shu">{{topBar.canyin}}</div>
      <div class="xiang">餐饮具</div>
    </li>
    <li @click="active = '血液安全'" :class="active=='血液安全'?'active':''">
      <div class="shu">{{topBar.caixue}}</div>
      <div class="xiang">血液安全</div>
    </li>
    <li @click="active = '计划生育'" :class="active=='计划生育'?'active':''">
      <div class="shu">{{topBar.jihuashengyu}}</div>
      <div class="xiang">计划生育</div>
    </li>
  </ul>
</template>

<script>
import { getTopNavData } from "../../api/fengzhuanye";
import Bus from "../../plugs/bus";
export default {
  name: "TopNav",
  data() {
    return {
      active: "公共场所",
      topBar: {
        gonggong: "100",
        yinshui: "399",
        zhiye: "11",
        fangshe: "350",
        school: "920",
        yiliao: "6150",
        xiaodu: "95",
        chanran: "7856",
        canyin: "21",
        caixue: "1",
        jihuashengyu: "114"
      }
    };
  },
  methods: {
    async getJson() {
      // try {
      var json = (await getTopNavData()).data.data;
      // } catch (error) {
      //   var json = [
      //     {
      //       total: 3614,
      //       specialty: "01"
      //     },
      //     {
      //       total: 284,
      //       specialty: "02"
      //     },
      //     {
      //       total: 14,
      //       specialty: "03"
      //     },
      //     {
      //       total: 308,
      //       specialty: "04"
      //     },
      //     {
      //       total: 916,
      //       specialty: "05"
      //     },
      //     {
      //       total: 6151,
      //       specialty: "06"
      //     },
      //     {
      //       total: 129,
      //       specialty: "0701"
      //     },
      //     {
      //       total: 6144,
      //       specialty: "0703"
      //     },
      //     {
      //       total: 21,
      //       specialty: "0704"
      //     },
      //     {
      //       total: 1,
      //       specialty: "08"
      //     },
      //     {
      //       total: 99,
      //       specialty: "09"
      //     }
      //   ];
      // }
      json.forEach(val => {
        switch (val.specialty) {
          case "01":
            this.topBar.gonggong = val.total;
            break;
          case "02":
            this.topBar.yinshui = val.total;
            break;
          case "03":
            this.topBar.zhiye = val.total;
            break;
          case "04":
            this.topBar.fangshe = val.total;
            break;
          case "05":
            this.topBar.school = val.total;
            break;
          case "06":
            this.topBar.yiliao = val.total;
            break;
          case "0701":
            this.topBar.xiaodu = val.total;
            break;
          case "0703":
            this.topBar.chanran = val.total;
            break;
          case "0704":
            this.topBar.canyin = val.total;
            break;
          case "08":
            this.topBar.caixue = val.total;
            break;
          case "09":
            this.topBar.jihuashengyu = val.total;
            break;
          default:
            break;
        }
      });
    }
  },
  mounted() {},
  watch: {
    active(e) {
      let name = zidian.find(val => {
        return val.name === e;
      });
      if (window._cancel) {
        window._cancel.forEach((item, index) => {
          item.cancel("中断请求");
          delete window._cancel[index];
        });
      }
      Bus.$emit("topNavChange", name);
    }
  },
  created() {
    this.getJson();
  }
};
let zidian = [
  { val: "01", name: "公共场所" },
  { val: "02", name: "饮水卫生" },
  { val: "03", name: "职业卫生" },
  { val: "04", name: "放射卫生" },
  { val: "05", name: "学校卫生" },
  { val: "06", name: "医疗卫生" },
  { val: "0701", name: "消毒产品" },
  { val: "0703", name: "传染病防治" },
  { val: "0704", name: "餐饮具" },
  { val: "08", name: "血液安全" },
  { val: "09", name: "计划生育" }
];
</script>

<style scoped lang="less">
ul {
  margin: 0;
  list-style: none;
  padding: 0;
}

.weishengxiang {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 1%;

  li {
    color: #fff;

    .shu {
      height: 60%;
      background-image: linear-gradient(to left, #058dfb, #1f62e7);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rem/16rem;
    }

    .xiang {
      height: 40%;
      background-color: #0b1f52;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:hover {
      cursor: pointer;
    }

    &.active {
      .shu {
        background: #6bca56;
      }

      .xiang {
        background-color: #30385c;
      }
    }
  }
}
</style>